<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />
    <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
    <title>收货地址 - 达漂亮</title>


</head>

<body>
    <div class="page ">
        <div class="page-hd">
            <div class="header base-header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">收货地址</div>
                <div class="header-right">
                    <!-- <a href=""></a> -->
                </div>
            </div>
        </div>

        <link rel="stylesheet" href="../../static/mobile/default/css/myaddress.css?v=2">
        <link rel="stylesheet" href="../../static/mobile/default/css/cityPicker.css">
        <link rel="stylesheet" href="../../static/mobile/default/css/userData.css" />

        <script type="text/html" id="addressListTpl">
            <div class=" addressesList " id="boxlists" style="overflow: auto;">
                <div class="page-bd">
                    <ul class="addresslist goodslist">

                    </ul>
                </div>
                <div class="page-ft" id="bottom" style="position: fixed;width: 100vw;bottom: 0;">
                    <a href="javascript:;" class="fs32 fw_b color_w BGcolor_r add_address">新增收货地址</a>
                </div>
            </div>
    </div>

    <div class="wrapper addressInfoBox">

    </div>
    </script>
    <script src="../../static/js/jquery/jquery-weui.min.js"></script>

    <!--地址列表-->

    <script type="text/html" id="addressLiTpl">
        {{each data as item index}}
        <li>
            {{if item.is_default==1 }}
            <div class="top block" data-index="{{index}}">
                <div class="address" data-index="{{index}}">
                    <div class="info">
                        <div>
                            <p class="fs30 fw_b color_3">{{item.userName}} {{item.telNumber}}</p>{{if item.is_default==1 }} <span class="fs22 color_w BGcolor_r">默认</span>{{/if}}
                            <div class="radioBox">

                                <a href="javascript:;" class="edit fs26 color_9" data-index="{{index}}"><img src="../../static/mobile/default/images/edit.png" alt=""><em>编辑</em></a>
                            </div>
                        </div>
                        <span class="fs28 color_9">{{item.full_region}}{{item.detailInfo}}</span></div>

                </div>
            </div>
            {{/if}} {{/each}} {{each data as item index}} {{if item.is_default!=1}}
            <object>
                <div class="block" data-index="{{index}}">
                    <div class="address" data-index={{index}}">
                        <div class="info">
                            <div>
                                <p class="fs30 fw_b color_3">{{item.userName}} {{item.telNumber}}</p>{{if item.is_default==1 }} <span class="fs22 color_w BGcolor_r">默认</span>{{/if}}
                                <div class="radioBox">

                                    <a href="javascript:;" class="edit fs26 color_9" data-index="{{index}}"><img src="../../static/mobile/default/images/edit.png" alt="">编辑</a>
                                </div>
                            </div>
                            <span class="fs28 color_9">{{item.full_region}}{{item.detailInfo}}</span></div>

                    </div>


                </div>
                <div class="swiped BGcolor_3">
                    <div class="delect" data-address_id="{{item.id}}"><img src="../../static/mobile/default/images/delectIcon.png" alt=""></div>
                </div>
            </object> {{/if}}

        </li>
        {{/each}}
    </script>

    <!--编缉或添加地址-->

    <script type="text/html" id="addressInfoTpl">

        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:;" class="left-arrow close_wrapper" data-type="list"></a>
                </div>
                <div class="header-title">{{if id }}修改地址{{else}}添加地址{{/if}}</div>
                <div class="header-right" onclick="evalPost();">保存</div>
            </div>
        </div>
        <form action="" id="formAddress">
            <div class="page-bd ">
                <!-- 页面内容-->
                <div class="cells">
                    <div class="cell">
                        <div class="cell_bd"><span class="fs28 color_9">收货人</span></div>

                        <div class="cell_ft">
                            <input type="text" class="fs28  color_3" placeholder="请输入收货人姓名" name="userName" value="{{userName}}">
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell_bd">
                            <span class="fs28 color_9">手机号码</span></div>
                        <div class="cell_ft">
                            <input type="Number" class="fs28  color_3" placeholder="请输入收货人电话" name="telNumber" value="{{telNumber}}">
                        </div>
                    </div>
                    <div class="cell bankType cell_access">
                        <div class="cell_bd">
                            <span class="fs28 color_9">所在地区</span></div>
                        <div class="cell_ft">
                            <input type="text" value="{{full_region}}" placeholder="请选择所在区域" class="fs28 fw_b color_3 bankBox" readonly="" id="city-picker" data-code="{{district}}" data-codes="{{province}},{{city}},{{district}}">
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell_bd">
                            <span class="fs28 color_9">详细地址</span></div>
                        <div class="cell_ft">
                            <input type="text" class="fs28  color_3" placeholder="请输入详细地址" name="detailInfo" value="{{detailInfo}}">
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell_bd">
                            <span class="fs28 color_9">是否设置为默认地址</span></div>
                        <div class="cell_ft">
                            {{if is_default==1}}
                            <input type="checkbox" name="is_default" id="male" value="1" checked class="chooseBtn" /> {{else}}
                            <input type="checkbox" name="is_default" id="male" value="1" class="chooseBtn" /> {{/if}}
                            <label for="male" class="choose-label"></label>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="id" value="{{id}}">

                <div class="page-ft userData">
                    <!--<a class="fs32 color_w fw_b BGcolor_r postAddress" onclick="evalPost();">{{if id }}确认修改{{else}}确认添加{{/if}}</a>-->
                    {{if id }}
                    <a class="fs32 color_w fw_b BGcolor_r delect" data-address_id="{{id}}">删除地址</a> {{/if}}
                </div>
            </div>
            </div>
            </from>
    </script>

    <script type="text/javascript">
        var isAddOrder = '0';
        var addressList = {};
        var defAddressId = 0;
        $(function() {


            $(".page-hd").append(template('addressListTpl'));
            var bottom_h = $("#bottom").height();
            var window_height = $(window).height();
            var boxlist_h = $("#boxlist").height();
            var header_h = $(".header").height();
            if (isAddOrder == 1) header_h = 0;
            var h = window_height - bottom_h - header_h;
            $("#boxlists").css('height', h + 'px');

        })

        share()

        function share() {
            /***用户点击分享到微信圈后加载接口接口*******/
            var url = window.location.href;
            console.log("url:" + url);
            $.ajax({
                url: "/api/mp/wxconfig",
                type: "post",
                data: {
                    shareUrl: url
                },
                headers: {
                    token: $.cookie('code')
                },
                dataType: "json",
                success: function(data) {
                    configData = {
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.data.appid, // 必填，公众号的唯一标识
                        timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                        signature: data.data.signature, // 必填，签名，见附录1
                        jsApiList: ['hideOptionMenu']
                            // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    };

                    //step2:注入配置信息
                    wx.config(configData);
                    //step3:通过ready接口处理成功验证
                    wx.ready(function() {
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                        //                 alert("执行ready方法");
                        //                 wx.checkJsApi({
                        //                      jsApiList: ['chooseImage'] // 需要检测的JS接口列表，所有JS接口列表见附录2,
                        //                      success: function(res) {
                        //                      // 以键值对的形式返回，可用的api值true，不可用为false
                        //                      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        //                      }
                        //                 });
                        //接口1:获取网络类型
                        wx.getNetworkType({
                            success: function(res) {
                                oldNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
                                //                        alert("网络类型"+ oldNet);
                            }
                        });
                        //禁用右上角菜单按钮
                        wx.hideOptionMenu();
                    })
                },
                error: function() {
                    // 			    _alert('ajax request failed!!!!');
                    return;
                }
            })



        }

        //获取收货地址区列表
        function getAddressList() {

            var address_id = $('#address_id').val();
            jq_ajax('https://mp.jianguoes.com/api/mp/listAddr', '', function(res) {
                if (res.code == 0) {
                    _alert(res.errmsg);
                    return false;
                }
                addressList = res.data;
                if (isAddOrder == 1) {

                    if (res.data.length == 0) {
                        $('.addressBox .tips').show();
                        $('.addressBox .address').hide();
                        return false;
                    }


                    if (address_id == 0) {
                        showAddress(addressList[0]);
                        evalShippingFee(); //计算运费
                    }

                    defAddressId = addressList[0]['address_id'];
                }

                $('.addresslist').html(template('addressLiTpl', res));
                container('.addresslist object')
            }, 'get')
        }

        //设置显示指定收货地址
        function showAddress(address) {
            $('.address').find('._consignee').html(address.consignee + ' ' + address.mobile);
            $('.address').find('._address').html(address.merger_name + ' ' + address.address);
            $('#address_id').val(address.address_id);
        }

        $(function() {
                getAddressList();
            })
            //点击删除地址
        $(document).on('click', '.addresslist .delect', function() {
                jq_ajax('https://mp.jianguoes.com/api/mp/delAddr', 'id=' + $(this).data('address_id'), function(res) {
                    if (res.code == 0) {
                        alert(res.errmsg);
                        return false;
                    }
                    window.location.reload()
                }, 'get')
            })
            //编辑页删除地址
        $(document).on('click', '.userData .delect', function() {
                jq_ajax('https://mp.jianguoes.com/api/mp/delAddr', 'id=' + $(this).data('address_id'), function(res) {
                    if (res.code == 0) {
                        alert(res.errmsg);
                        return false;
                    }
                    window.location.reload()
                }, 'get')
            })
            //关闭编缉弹出
        $(document).on('click', '.addressInfoBox .close_wrapper', function() {
            $('html').removeClass('noscroll');
            $('.addressInfoBox').removeClass('move-left');
        })

        //点击新增地址
        $(document).on('click', '.add_address', function() {
                $('html').addClass('noscroll');
                $('.addressInfoBox').html(template('addressInfoTpl'));
                $('.addressInfoBox').addClass('move-left');
                $("#city-picker").cityPicker({
                    title: "请选择省市区"
                });
            })
            //点击编缉收货地址
        $(document).on('click', '.addresslist .edit', function() {
                isContainer = true;
                $('.addressInfoBox').html(template('addressInfoTpl', addressList[$(this).data('index')]));
                $('html').addClass('noscroll');
                $('.addressInfoBox').addClass('move-left');
                $("#city-picker").cityPicker({
                    title: "请选择省市区"
                });
            })
            //提交修改或添加操作
        function evalPost() {
            if (!$('input[name=userName]').val()) {
                _alert('请输入收货人姓名');
                return
            } else if (!$('input[name=telNumber]').val()) {
                _alert('请输入收货人电话');
                return
            } else if ($('input[name=telNumber]').val().length < 11) {
                _alert('请输入正确的电话');
                return
            } else if (!$('input[id=city-picker]').attr('data-code')) {
                _alert('请选择所在区域');
                return
            } else if (!$('input[name=detailInfo]').val()) {
                _alert('请输入详细地址');
                return
            }
            var postData = $('#formAddress').toJson()
            postData.nationalCode = $('#city-picker').attr('data-code');
            postData.full_region = $('#city-picker').val();
            var str = postData.full_region.split(" ")
            postData.cityName = str[1];
            postData.countyName = str[2];
            postData.provinceName = str[0];

            var url = 'https://mp.jianguoes.com//api/mp/saveOrUpdateAddr';
            jq_ajax(url, JSON.stringify(postData), function(res) {
                if (res.errno != 0) {
                    _alert(res.errmsg);
                    return false;
                }
                $('.addressBox .tips').hide();
                $('.addressBox .address').show();
                addressList = res.list;
                $('.addresslist').html(template('addressLiTpl', res));
                container('.addresslist object');
                $('.addressInfoBox .close_wrapper').trigger("click");
                getAddressList();
            })
        }
        //设置为默认地址
        $(document).on('click', '.addresslist .editDefault', function() {
            var obj = $(this);
            if (defAddressId != obj.val()) {
                jq_ajax('/member/api.address/editdefault.html', 'address_id=' + $(this).val(), function(res) {
                    if (res.code == 0) {
                        _alert(res.errmsg);
                        return false;
                    }
                    defAddressId = obj.val();
                })
            }

        })
    </script>

    </div>

    <script src="../../static/js/art-template.js"></script>
    <script src="../../static/mobile/default/js/lib/fastclick.js"></script>
    <script src="../../static/js/jquery/lazyload/jquery.lazyload.js"></script>
    <script>
        $(function() {
            FastClick.attach(document.body);
            $("img.lazy").lazyload({
                effect: "fadeIn",
                event: "scroll",
                container: $(".page-bd")
            });
        });
    </script>

    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var is_xcx = 0;
        $(document).on('click', 'a', function() {
            var href = $(this).attr('href');
            if (href.indexOf('/pages') != -1) {
                if (is_xcx == 1) {
                    wx.miniProgram.navigateTo({
                        url: href
                    })
                    return false;
                } else {
                    return false;
                }
            }
        })
    </script>
</body>

</html>